<template>
  <view class="content">
    <z-paging ref="paging" v-model="data.articleList" @query="queryList">
      <view class="article-box">
        <view class="list-item flex" @click="goNav(`${pageUrl.common.pageDetailUrl}?id=${item.article_id}`)"
              v-for="(item,index) in data.articleList" :key="index">
          <view>
            <image :src="arrayGet(item, 'article_image.thumbnail_path_url')"></image>
          </view>
          <view>
            <text class="title">{{ item.article_title }}</text>
            <view class="text-content line-clamp-2">{{ item.article_summary }}
            </view>
          </view>
        </view>
      </view>
      <template #bottom>
        <view style='height:120rpx;'></view>
      </template>
    </z-paging>
    <Tabbar :current-page="1"></Tabbar>
  </view>
</template>

<script setup>
import {recommendList} from "../../api/module/article.js"
import {onLoad} from "@dcloudio/uni-app";
import {ref, reactive} from 'vue';
import {arrayGet, goNav, pageUrl} from "../../utils/common";

const data = reactive({
  articleList: []
})
const paging = ref(null)
const queryList = (pageNo, pageSize) => {
  let params = {
    page: pageNo,
    limit: pageSize
  }
  recommendList(params).then(res => {
    paging.value.complete(res.data);
  })
}
</script>

<style lang="scss" scoped>
.article-box {
  padding: 32rpx 32rpx 0;
}
</style>